<template>
	<div class="dialogZ">
		<el-dialog v-model="dialogVisible" width="800" :before-close="hideModal">
			<div :class="['lottery-container', 'qilecai']" ref="targetRef">
				<div class="top-logo">
					<img src="/@/assets/lottery/cwlogo.png" alt="中国福利彩票" class="cw-logo" />
				</div>

				<!-- 期号 -->
				<div class="issue">第{{ infoData.drawIssue }}期</div>

				<!-- 开奖号码区域 -->
				<div class="lottery-box">
					<div class="numbers">
						<text v-for="(item, index) in infoData.redNum?.split(',')" :key="index">{{ item }}</text>
						<text style="margin-left: 20px" v-for="(item, index) in infoData.buleNum?.split(',')"
							:key="index">{{ item }}</text>
					</div>
				</div>

				<!-- 本期销售额 -->
				<div class="sales">
					<!-- <h2>本期销售额：</h2> -->
					<p class="sales-amount">{{ infoData.totalSales }}元</p>
				</div>

				<!-- 中奖结果表格 -->
				<div class="prize-result">
					<!-- <h2>中奖结果</h2> -->
					<table>
						<tbody>
							<tr v-for="(item, idx) in infoData.winNoticeDetailsVos" :key="idx">
								<td style="width: 20%"></td>
								<td style="width: 46%">{{ item.totalNum }}</td>
								<td style="width: 33%">{{ item.bonus }}</td>
							</tr>
						</tbody>
					</table>
				</div>

				<!-- 下期奖池金额 -->
				<div class="next-prize-pool">
					<!-- <h2>下期一等奖奖池累计金额</h2> -->
					<p class="pool-amount">{{ infoData.balanceMoney }}元</p>
				</div>

				<!-- 兑奖期限 -->
				<div class="claim-deadline">
					<!-- <h2>兑奖期限</h2> -->
					<p>本期兑奖截止日为{{ infoData.endCashTime }}，逾期未兑奖视为弃奖，</p>
					<p>弃奖奖金纳入彩票公益金。</p>
				</div>
			</div>

			<template #footer>
				<div class="dialog-footer">
					<el-button type="danger" @click="captureAndDownload"> 生成并下载 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { onMounted, ref } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { useRoute, useRouter } from 'vue-router';
import html2canvas from 'html2canvas';

// 中奖结果列表（奖等、注数、金额）
const prizeList = ref([
	{ level: '一等奖', count: 12, amount: 5969509 },
	{ level: '二等奖', count: 136, amount: 106931 },
	{ level: '三等奖', count: 2400, amount: 3000 },
	{ level: '四等奖', count: 99222, amount: 200 },
	{ level: '五等奖', count: 152915, amount: 10 },
	{ level: '六等奖', count: 14206805, amount: 5 },
]);

const emit = defineEmits(['handleClose']);

// 引用目标元素
const targetRef = ref(null);

// 截图并下载
const captureAndDownload = async () => {
	if (!targetRef.value) return;

	try {
		// 配置项（重要！）
		const options = {
			scale: 2, // 提高分辨率（默认值为设备像素比）
			useCORS: true, // 允许跨域图片
			backgroundColor: null, // 背景透明（设为 '#fff' 则为白色背景）
			logging: false, // 关闭日志
		};

		// 生成 Canvas
		const canvas = await html2canvas(targetRef.value, options);

		// Canvas 转图片
		const imageUrl = canvas.toDataURL('image/png');

		// 触发下载
		const link = document.createElement('a');
		link.href = imageUrl;
		link.download = `screenshot-${new Date().getTime()}.png`;
		link.click();
	} catch (error) {
		console.error('截图失败:', error);
	}
};

// 页面加载时
onMounted(() => {
	NextLoading.done();
});

const infoData = ref({});
const dialogVisible = ref(false);
async function showModal(item) {
	dialogVisible.value = true;
	if (item) {
		infoData.value = item;
		let arr = [];
		item.winNoticeDetailsVos?.forEach((childItem, childIndex) => {
			if (childIndex < 6) {
				arr.push(childItem);
			}
		});
		infoData.value.winNoticeDetailsVos = arr;
	}
}

function hideModal() {
	dialogVisible.value = false;
	emit('handleClose');
}

defineExpose({
	hideModal,
	showModal,
});
</script>

<style scoped lang="scss">
@import url('../css.scss');

.dialogZ {
	:deep(.el-overlay) {
		background-color: rgba(141, 141, 141, 0.7);
		backdrop-filter: saturate(180%) blur(3px);
	}
}

.shuangseqiu {
	background: url('/@/assets/lottery/shuangseqiu_logo.png') no-repeat center top;
}

.qilecai {
	background: url('/@/assets/lottery/qilecai_logo3.png') no-repeat center top;
}

.lottery-container {
	width: 567.65px;
	height: 1101.8px;
	/* 适配手机端，可按需调整 */
	margin: 0 auto;

	/* 主背景图 */
	background-size: 100% 100%;
	padding: 10px;
	font-family: 'Microsoft Yahei', sans-serif;
	color: #333;
	position: relative;
	/* 用于灯笼绝对定位 */
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 230px;
}

.header {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.logo {
	width: 80px;
	height: auto;
	margin-right: 10px;
}

.ssq-logo {
	width: 60px;
	height: auto;
	margin-left: 10px;
}

.header h1 {
	font-size: 24px;
	color: #c1272d;
}

.lottery-box,
.draw-numbers,
.sales,
.next-prize-pool,
.claim-deadline {
	color: white;
	padding: 10px;
	border-radius: 4px;
	margin-bottom: 20px;
	color: #c1272d;
}

.lottery-box h2,
.draw-numbers h2,
.sales h2,
.next-prize-pool h2,
.claim-deadline h2 {
	text-align: center;
	margin-bottom: 10px;
}

.claim-deadline {
	color: #c1272d;
	font-size: 14px;
	font-weight: bold;
	margin-top: 50px;

	p {
		width: 100%;
		display: flex;
		text-align: center;
		justify-content: center;
		margin-bottom: 10px;
	}
}

.numbers {
	color: #c73907;
	margin-top: 37px;
	font-size: 18px;
	font-weight: bold;
	display: flex;
	gap: 20px;
	margin-left: -30px;
}

.issue {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: #c1272d;
	margin-top: 5px;
	margin-bottom: 15px;
}

.sales-amount {
	margin-top: 35px;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	color: #c73907;
}

.pool-amount {
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	color: #c73907;
	margin-top: 80px;
}

.prize-result {
	margin-bottom: 20px;
	margin-top: 60px;
	width: 380px;
}

.prize-result h2 {
	text-align: center;
	font-size: 20px;
	color: #c1272d;
	margin-bottom: 10px;
}

.prize-result table {
	width: 100%;
	border-collapse: collapse;
	color: #c1272d;
	font-weight: bold;
}

.prize-result th,
.prize-result td {
	// border: 1px solid #c1272d;
	padding: 8px;
	text-align: center;
}

.prize-result th {
	background-color: #c1272d;
	color: white;
}

.footer {
	text-align: center;
	margin-top: 20px;
	color: #c1272d;
	font-weight: bold;
}
</style>
